<template>

  <div class="m_bottom">
    <div id="demo">
      <inlineCalendar @change="onChange"/>
      <calendar/>
    </div>
    <table>
      <thead>
      <tr>
        <th><button @click="onChangeType()" type="button">早餐</button></th>
        <th><button @click="onChangeType1()" type="button">中餐</button></th>
        <th><button @click="onChangeType2()" type="button">晚餐</button></th>
      </tr>
      </thead>
    </table>
      <div v-for="(item) in setMealList" class="order">
          <input id=item.id  v-model="checkList"  type="checkbox" checked>
          <div class="title" @click="queryById(item.id)">
            {{item.setmealName}}
          </div>
          <div class="text">
            <div class="text1">套餐价格：{{item.setmealPrice}}</div>
            <div class="text2">套餐状态：{{item.setmealState}}</div>

      </div>
        <span ></span>
     <a href="" ><img src="../../assets/image/setmeal/plus.png" width="20" height="20" style=" margin-left:285px; "></a>
      </div>
    <div>

    <button class="r" type="button" >支付</button>
    </div>
  </div>


</template>

<script>
import axios from "axios";


export default {
  name: "Login",
  data() {
    return {
      setMealList:"",
      checkList: [],
      datetime: {},
      type :"早餐"
    }
  },
  mounted() {
      this.getCurrentTime();
      var url = "http://localhost:8888/meal/find";
      axios.post(url,this.datetime).then((res)=>{
      if (res.data.code==200){
        console.log(res.data.data)
        this.setMealList=res.data.data;
      }
      else {
        this.message.error(res.data.message);
      }
    })
  },
  methods: {
    getCurrentTime() {
      //获取当前时间并打印
      var athis = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      athis.gettime = yy+'-'+mm+'-'+dd;
      console.log(athis.gettime)
      this.datetime=athis.gettime;
    },

    queryById(id){
      this.$router.replace("/Login/"+id);
    },
    onChange(date) {
      var url = "http://127.0.0.1:8888/meal/find";
      this.datetime=date.format('YYYY-MM-DD');
      axios.post(url,this.datetime).then((res)=>{
        if (res.data.code==200){
          console.log(res.data.data)
          this.setMealList=res.data.data;
        }
        else {
          this.message.error(res.data.message);
        }
      })
      console.log(date.format('YYYY-MM-DD'));
    },
    onChangeType(){
      var a = "http://127.0.0.1:8888/meal/findByType/";
      axios.post(a,{datetime:this.datetime,type:"早餐"}).then((res)=>{
        if (res.data.code==200){
          console.log(res.data.data)
          this.setMealList=res.data.data;
        }
        else {
          this.message.error(res.data.message);
        }
      })
    },
    onChangeType1(){
      var a = "http://127.0.0.1:8888/meal/findByType/";
      axios.post(a,{datetime:this.datetime,type:"午餐"}).then((res)=>{
        if (res.data.code==200){
          console.log(res.data.data)
          this.setMealList=res.data.data;
        }
        else {
          this.message.error(res.data.message);
        }
      })
    },
    onChangeType2(){
      var a = "http://127.0.0.1:8888/meal/findByType/";
      axios.post(a,{datetime:this.datetime,type:"晚餐"}).then((res)=>{
        if (res.data.code==200){
          console.log(res.data.data)
          this.setMealList=res.data.data;
        }
        else {
          this.message.error(res.data.message);
        }
      })
    }
  }
}
</script>
<style scoped>

.m_head .nav_item_link {
  width: 90%;
  height: 20%;
  text-align: center;
  align-items: center;
  margin-left: 5%;
  border: 1px black solid;
}

.m_middle .nav_item {
  color: #00ff00; font-weight:bold; font-size: 30px; text-align:center;
  width: 41%;
  height: 60%;
  margin-top: 10%;
  margin-left: 5%;
  background: gold;
  border-radius: 20px;
  text-align: center;
  line-height: 110px;
}

.m_bottom {
  height: 10%;
  -webkit-overflow-scrolling: touch;
  overflow: scroll;
  border: 1px black solid;
}
.order {
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
  background: #f0c78a;
  border: 1px black solid;
}
.order .title {
  font-size: large;
}
.order .text {
  display: flex;
  font-size: small;
}
.text .text2 {
  margin-left: 7%;
}
.r{
  position:absolute;
  right:5px;
  bottom:5px;
}
</style>

